<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    //轮播图
    var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        delay: 2000,
        speed: 500,
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>

<script>
    //自动渲染生成新商品
    (function () {
        $.ajax({
            url: "./json/goods.json",//向本地的json文件发送请求
            type: "GET",
            success: function (data) {
                var i;
                var things = "";//用一个变量来存储json中的数据
                for (i = 0; i < data.length; i++) {
                    //用for循环遍历数组将数据存入html变量中
                    things += `<a href="http://127.0.0.1:5500/dist/polo.html"><div class="frag-commodities-item-inner">
                            <div class="item-pic"><img src="${data[i].pic}"></div>

                            <div class="item-pic-name">${data[i].name}</div>
                            <div class="item-pn">
                            <div class="item-left">￥${data[i].price}</div>
                            <div class="item-right">月销量${data[i].num}</div>
                            </div>
                            </div></a>`;
                }
                document.getElementById("commodities-wrap").innerHTML += things;
            },
            error: function () {
                console.log("不太彳亍");
            }
        })
    })();
</script>

<script>
    //自动渲染生成排行榜
    (function () {
        $.ajax({
            url: "./json/rank.json",//向本地的json文件发送请求
            type: "GET",
            success: function (data) {
                var i;
                var things = "";//用一个变量来存储json中的数据
                for (i = 0; i < data.length; i++) {
                    //用for循环遍历数组将数据存入html变量中
                    things += `<div class="frag-commodities-item-inner">
                            <div class="item-pic"><img src="${data[i].pic}"></div>

                            <div class="item-pic-name">${data[i].name}</div>
                            <div class="item-pn">
                            <div class="item-left">￥${data[i].price}</div>
                            <div class="item-right">月销量${data[i].num}</div>
                            </div>
                            </div>`;
                }
                document.getElementById("rank").innerHTML += things;
            },
            error: function () {
                console.log("不太彳亍");
            }
        })
    })();
</script>
<!-- ——————————————————————————————————楼梯效果 -->
<script>
    $(function () {
        // 获取各个楼层距离文档顶部的高度; 
        var $stairs = $(".home-title");
        // 存储所有楼层距离文档顶部的高度; 
        var stairs_list = [];

        //offset()获取的元素距离其实参照物是文档顶部!; 

        for (var i = 0; i < $stairs.length; i++) {
            // 每一个元素距离文档顶部的top值; 
            var _top = $stairs.eq(i).offset().top;
            if(i==$stairs.length-1){
                stairs_list.push(parseInt(_top+600));
            }else{
                stairs_list.push(parseInt(_top-70));
            }
            
        }
        // 点击事件 : 
        // 在点击楼梯按钮的时候我们只需要获取楼梯按钮的下标，然后根据下标找到对应的楼层高度值，给scrollTop 赋值即可; 

        var stairs_btn = $(".first .lists");

        stairs_btn.click(function () {
            // 获取下标; 
            // 利用index查找到 当前元素在 staris_btn 之中的下标; 
            var index = stairs_btn.index($(this));
            // 根据下标获取到楼层的top定位，并把这个top值赋值给scrollTop
            $("html,body")
                .stop(true)
                .animate({
                    scrollTop: stairs_list[index]
                });

        });


    })
</script>